<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>XiaoMing Chat</title>
  </head>
  <body>
    <h1 class="title">聊天室(小明自制版)</h1>
    <div class="content-box">
      <div class="coat">
        <ul class="chat-content" id="chatListId">
          <li>
            <span title="小明小明小明小明小明小明小明"
              >小明小明小明小明小明小明小明</span
            >
            <span>：</span>
            <span>xxx</span>
          </li>
        </ul>
      </div>
      <div class="online-people">
        <h2>在线的人</h2>
        <ul class="online-list" id="onlineListId">
          <li>小明小明小明小明小明小明小明明小明小明小明小明小明小明</li>
        </ul>
      </div>
    </div>
    <div class="footer">
      <textarea
        placeholder="请输入内容，回车发送。按住Shift + 回车换行哦！"
        name="chat-box"
        id="chatInputId"
      ></textarea>
    </div>
  </body>
</html>
